/*
 * @Description: 地铁线路绘制工具
 * @Author: Craft
 * @Date: 2024-01-08
 */
import * as Cesium from 'cesium'
import { CoordTransform } from './mapPlugin'

export class SubwayLineDrawer {
  constructor(viewer) {
    this.viewer = viewer
    this.polylines = new Cesium.PolylineCollection()
    this.billboards = new Cesium.BillboardCollection()
    this.viewer.scene.primitives.add(this.polylines)
    this.viewer.scene.primitives.add(this.billboards)

    // 存储线路和站点的引用，用于后续更新
    this.lineEntities = new Map()
    this.stationEntities = new Map()
  }

  /**
   * 绘制单条地铁线路
   * @param {Object} lineData 线路数据
   * @param {String} lineData.name 线路名称
   * @param {Array} lineData.coordinates 线路坐标点数组
   * @param {String} lineData.color 线路颜色
   * @param {Boolean} lineData.show 是否显示
   * @param {Array} lineData.stations 站点数组
   */
  drawLine(lineData) {
    const { name, coordinates, color, show, stations } = lineData

    // 创建线路
    const polyline = this.polylines.add({
      positions: Cesium.Cartesian3.fromDegreesArray(coordinates.flat()),
      width: 3,
      material: new Cesium.Material({
        fabric: {
          type: 'Color',
          uniforms: {
            color: Cesium.Color.fromCssColorString(color).withAlpha(0.8),
          },
        },
      }),
      show: show,
    })

    // 存储线路引用
    this.lineEntities.set(name, polyline)

    // 绘制站点
    if (stations && stations.length > 0) {
      this.drawStations(stations, name, color, show)
    }
  }

  /**
   * 绘制站点标记
   * @param {Array} stations 站点数组
   * @param {String} lineName 所属线路名称
   * @param {String} color 站点颜色
   * @param {Boolean} show 是否显示
   */
  drawStations(stations, lineName, color, show) {
    stations.forEach((station) => {
      const billboard = this.billboards.add({
        position: Cesium.Cartesian3.fromDegrees(
          station.longitude,
          station.latitude
        ),
        image: this.createStationIcon(color),
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        scale: 0.5,
        show: show,
      })

      // 存储站点引用
      const stationKey = `${lineName}-${station.name}`
      this.stationEntities.set(stationKey, billboard)
    })
  }

  /**
   * 创建站点图标
   * @param {String} color 站点颜色
   * @returns {HTMLCanvasElement}
   */
  createStationIcon(color) {
    const canvas = document.createElement('canvas')
    canvas.width = 20
    canvas.height = 20
    const context = canvas.getContext('2d')

    // 绘制外圆
    context.beginPath()
    context.arc(10, 10, 8, 0, Math.PI * 2)
    context.fillStyle = 'white'
    context.fill()

    // 绘制内圆
    context.beginPath()
    context.arc(10, 10, 6, 0, Math.PI * 2)
    context.fillStyle = color
    context.fill()

    return canvas
  }

  /**
   * 更新线路显示状态
   * @param {String} lineName 线路名称
   * @param {Boolean} show 是否显示
   */
  updateLineVisibility(lineName, show) {
    // 更新线路显示状态
    const line = this.lineEntities.get(lineName)
    if (line) {
      line.show = show
    }

    // 更新该线路所有站点的显示状态
    this.stationEntities.forEach((billboard, key) => {
      if (key.startsWith(`${lineName}-`)) {
        billboard.show = show
      }
    })
  }

  /**
   * 清除所有线路和站点
   */
  clear() {
    this.polylines.removeAll()
    this.billboards.removeAll()
    this.lineEntities.clear()
    this.stationEntities.clear()
  }

  /**
   * 销毁实例
   */
  destroy() {
    this.clear()
    if (this.polylines) {
      this.viewer.scene.primitives.remove(this.polylines)
    }
    if (this.billboards) {
      this.viewer.scene.primitives.remove(this.billboards)
    }
  }
}
